<template>
  <div class="app-container">
      <div class="top-title">
              <div>学校实验开出率</div>
              <div class="top-title">
                  <div >
                      <!-- <el-form-item label="地区" prop="courseArea"> -->
                        <!-- <el-cascader
                        clearable
                        filterable
                        placeholder="地区"
                        :options="list"
                        :props="cityProps"
                        v-model="cityCode"
                        popper-class="pc-sel-area-cascader"
                        :disabled="true"
                        /> -->
                    <!-- </el-form-item> -->
                  </div>
                  <div class="btn-search top-title" style="margin-left:10px" @click="showDialog()">
                    <div>筛选</div>
                    <img class="down-icon" src="../../assets/images/arrow down.png" alt="">
                  </div>
              </div>
            </div>
    <div style="display:flex">
      <el-col :sm="6" :lg="6" style="flex:1" class="echarbox" v-for="(item,index) in dataCount" :key="index">
          <div class="" style="text-align:center" >
            <el-progress type="circle" :percentage="item.percentage"></el-progress>
            <div style="font-size:14px;text-align: center;">{{item.name}}</div>
        </div>
      </el-col>
      <!-- <el-progress type="circle" :percentage="25"></el-progress>
      <el-progress type="circle" :percentage="100" status="success"></el-progress>
      <el-progress type="circle" :percentage="70" status="warning"></el-progress>
      <el-progress type="circle" :percentage="50" status="exception"></el-progress> -->
    </div>
    <!-- <div class="chart" ref="chart" /> -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="地区" prop="courseArea">
            <!-- <el-input v-model="queryParams.courseArea" placeholder="请输入" clearable style="width: 240px" @keyup.enter="handleQuery" /> -->
            <!-- addRessList -->
            <el-cascader
              clearable
              filterable
              placeholder="请选择区域"
              :options="addRessList"
              :props="cityProps"
              v-model="queryParams.courseArea"
              popper-class="pc-sel-area-cascader"
              @change="areaCodeChange"
            />
          </el-form-item>
          <!-- <el-form-item label="学校" prop="courseDept">   不传
            <el-select v-model="queryParams.courseDept" placeholder="请选择学校" clearable @change="change">
              <el-option v-for="item in tenantOptions" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="学年" prop="courseYear">
            <el-select v-model="queryParams.courseYear" placeholder="请选择学年" clearable @change="change">
              <!-- <el-option key="2024-2025" label="2024-2025" value="2024-2025"> </el-option> -->
              <el-option v-for="item in sys_stu_year" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学段" prop="coursePeriod">
            <el-select v-model="queryParams.coursePeriod" placeholder="请选择学段" clearable >
              <el-option v-for="dict in sys_period" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学科" prop="courseSubject">
            <el-select v-model="queryParams.courseSubject" placeholder="请选择学科" clearable @change="change">
              <el-option v-for="dict in subjectOptions" :key="dict.id" :label="dict.subjectName" :value="dict.id"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item> -->
        </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog> 
  </div>
</template>

<script setup name="PieChart" lang="ts">
import * as echarts from 'echarts';
import { chartBySchool,finDistrictList } from '@/api/core/home';
const { proxy } = getCurrentInstance();
// sys_stu_year学年
const { sys_notice_type, sys_period, sys_grade,sys_stu_year } = toRefs<any>(proxy?.useDict('sys_notice_type', 'sys_period', 'sys_grade','sys_stu_year'));
import { useSubjectList } from '@/composables/useSubjectList';
const { subjectOptions, fetchSubjectList } = useSubjectList();

const emit = defineEmits(["updataSchool",  "delItemClick", "popClose"])

interface Props {
    courseArea:{
        type: String,
        default:''
    },
    list:Array<any>
}
const props = defineProps<Props>()
const cityCode = ref<string|number>()
const provinceList = ref([]);
const districtList = ref([]);//区域数据
const getDistrictList = async () => {
  const res = await finDistrictList(cityCode.value)
  districtList.value = res.data;
  console.log('根据省市获取的区域数据',districtList.value)
}
// 监听 courseArea 的变化
// watch([
//     () => props.courseArea, (newVal, oldVal) => {
//         // 如果 courseArea 发生变化，
//         console.log('监听区域id===',newVal)
//         cityCode.value = newVal;
//         if (newVal !== oldVal) {
            
//         }
//     },{
//     immediate:true,
//     deep:true},
//     () => props.list,(newVal, oldVal) => {
//         provinceList.value = newVal;
//         console.log('学校监听区域下拉===',newVal)
//     },{
//     immediate:true,
//     deep:true},
// ])
//  watch([props.courseArea, props.list], (newVal, oldVal) => {
//       // 当propA或propB发生变化时，这个函数会被调用
//       console.log('Prop changed:', newVal, oldVal);
//     }, {
//         immediate:true,
//       deep: true // 开启深度监听
//     });
watch(() => props.courseArea, (newVal, oldVal) => {
    // 如果 courseArea 发生变化，
    console.log('监听区域id===',newVal)
    cityCode.value = newVal;
    if (newVal !== oldVal && newVal) {
        //获取当前省市对应的区数据
        // getDistrictList()
    }
    },{
        immediate:true,
        deep:true},
    // () => props.list,(newVal, oldVal) => {
    //     provinceList.value = newVal;
    //     console.log('学校监听区域下拉===',newVal)
    // },{
    // immediate:true,
    // deep:true},
);


//学校改租户数据
import { useTenantlList } from '@/composables/useSchoolList';
const { tenantOptions, fetchTenantlList,tenantDisabled} = useTenantlList();
import cityData from '@/assets/json/pca-code.json';
const addRessList = ref(cityData);
const cityProps = reactive({
  emitPath: false,
  value: 'code', //指定选项的值为addresslist对象的code属性
  label: 'name', //指定选项标签为addresslist对象的name属性
  children: 'children' //指定选项的子选项为addresslist对象的children属性
});

const dialog = reactive<DialogOption>({
  visible: false,
  title: '筛选'
});
const queryParams = ref({
    courseArea: undefined, //地区
    courseDept:  undefined,//学校
    courseSubject: undefined,//学科
    courseYear: undefined, //学年
    coursePeriod: undefined,//学段
    params: {}
});
const dataCount = ref([]) as any;//学校

const showDialog = async () => {
  dialog.visible = true;
}
/** 搜索按钮操作 */
const submitForm = async () => {
  dialog.visible = false;
  dataCount.value = [];
  await getList();
  //传回学校id给父组件
  emit('updataSchool',queryParams.courseDept)

};
/**取消 */
const cancel = async () => {
  dialog.visible = false;
  // queryParams.courseArea = undefined
};
const areaCodeChange = (e)=>{
  console.log('地区选择',e)
  //根据地区重新获取学校数据
  fetchTenantlList(e);
  //重置学校数据
  queryParams.courseDept = undefined;
}
const change = (e)=>{
  console.log('学校选择====',e,queryParams.courseDept)
}


const getList = async () => {
  // loading.value = true;
  const res = await chartBySchool(queryParams.value);
  const list = res.data;
  //处理返回键值对数据
  Object.keys(list).forEach(key => {
    console.log(key + ': ' + list[key]);
    dataCount.value.push({percentage:list[key].replace(new RegExp("%", 'g'), ''),name:key});
  });
//   dataCount.value = res.data;
  console.log(res.data,'学校实验开出率',dataCount.value);

}

onMounted(() => {
  getList();
  dataCount.value = [];
});
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  .chart {
    width: 100%;
    height: 300px;
  }
}
::v-deep .el-progress-circle{
    width: 50px !important;
    height: 50px !important;
}
.top-title{
  font-size: 20px;
  color: #141414;
  line-height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn-search{
    font-size: 14px;
    color: #999999;
    padding: 0 10px;
    width: 100px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    .down-icon{
      width: 12px;
      height: 6px;
    }
  }
}
</style>
